<h3 mat-dialog-title>New {{data?.type}}</h3>

<form>
  <div mat-dialog-content>

    <mat-form-field class="w-100 standalone-field">
      <span
        matPrefix
        class="d-flex flex-nowrap align-items-center justify-content-between me-2">
        <mat-icon>folder</mat-icon>
        <span class="text-muted">|</span>
      </span>
      <mat-select
        [(ngModel)]="data.path"
        class="dark"
        name="path"
        placeholder="Folder name">
        <mat-option
          *ngFor="let idx of data.folders"
          [value]="idx">
          {{idx}}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field class="w-100 standalone-field">
      <span
        matPrefix
        class="d-flex flex-nowrap align-items-center justify-content-between me-2">
        <mat-icon>edit</mat-icon>
        <span class="text-muted">|</span>
      </span>
      <input
        type="text"
        [placeholder]="data.type === 'file' ? 'Filename' : 'Folder name'"
        matInput
        autocomplete="off"
        [(ngModel)]="data.name"
        name="name"
        cdkFocusInitial>
    </mat-form-field>

  </div>

  <div mat-dialog-actions [align]="'end'">

    <button
      mat-flat-button
      type="button"
      mat-dialog-close>
      Close
    </button>

    <button
      mat-flat-button
      color="primary"
      type="submit"
      [disabled]="!pathValid()"
      [mat-dialog-close]="data">
      Create
    </button>

  </div>
</form>